<template>
	<view>
		<view class="missionStatus">
			<view v-for="(item, index) in issues" :key="index" :class="[{ item }, { itemStyle: showIssue == index }]" @click="getIssueNaver(index)">{{ item.text }}</view>
		</view>
		
		<view class="missionList">
			<!-- <scroll-view @scrolltolower="uploadMissioc" :style="'height:' + wh + 'px'" scroll-y="true" class="scroll"> -->
				<view v-for="(item, index) in auditList" :key="index" class="missionItem">
					<view class="itemLeft">
						<view class="itemLeft-top">{{ item.task_name }}</view>
						<view class="itemLeft-bom">{{ item.receipt_time }}</view>
					</view>
					<!-- <view class="itemCenter">
						<text v-if="item.status == 1" class="text2">待审核</text>
						<text v-if="item.status > 1" class="text4">已审核</text>
					</view> -->
					<view @click="gotoDetail(item.task_receipt_id)" class="itemRight">
						<text>查看详情</text>
						<image src="/static/images/rightclick.png"></image>
					</view>
				</view>
				<view v-if="!auditList.length" class="notAvailable">暂无任务~</view>
				<!-- <view class="over_line" v-if="isover">----- 加载完毕 ------</view> -->
			<!-- </scroll-view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				issues: [
					{
						text: '待审核'
					},
					{
						text: '已审核'
					}
				],
				showIssue: 0,
				auditList:[],
				id:'',
				type:'post'
			};
		},
		onLoad(e) {
			this.id = e.id
			if(!e.show) {
				this.showIssue = 0
			}else {
				this.showIssue = e.show
			}
			this.getAuditList()
		},
		methods:{
			// 切换已发布状态  获取已发任务数据列表
			getIssueNaver(index) {
				this.showIssue = index;
				this.getAuditList()
			},
			// 获取审核任务列表
			getAuditList() {
				this.$api.getUserTaskList({
					type:this.type,
					examine_type:this.showIssue,
					id:this.id
				},res => {
					this.auditList = res.data.list
				})
			},
			// 跳转到已接任务详情页
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pages/users/mission_detail/mission_detail?id=${id}&type=${this.type}`
				});
			},
		}
	}
</script>

<style lang="less">
page {
	background-color: #FFFFFF;
}
.missionStatus {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	.item {
		position: relative;
		font-size: 30rpx;
		font-weight: bold;
		color: #b8b8b8;
		z-index: 1;
	}
	.itemStyle {
		color: #000000;
	}
	.itemStyle::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ffe287;
		width: 100%;
		height: 13rpx;
		border-radius: 5rpx;
		z-index: -1;
	}
}


.missionList {
	padding: 20rpx 20rpx 0;
	background-color: #ffffff;
	// .scroll {
	// 	overflow: hidden;
		.over_line {
			text-align: center;
			font-size: 26rpx;
			color: #999;
			padding: 20rpx 0;
		}
		.missionItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eeeeee;
			padding-bottom: 10rpx;
			.itemLeft {
				flex: 1;
				.itemLeft-top {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #343434;
					line-height: 36rpx;
				}
				.itemLeft-bom {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #9a9a9a;
					line-height: 36rpx;
					margin-left: 10rpx;
				}
			}
			.itemCenter {
				margin-right: 120rpx;
				font-size: 24rpx;
				.text1 {
					color: #5256ff;
				}
				.text2 {
					color: #fcae14;
				}
				.text3 {
					color: #ee4c48;
				}
				.text4 {
					color: #84cc2c;
				}
			}
			.itemRight {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				text {
					vertical-align: middle;
					margin-right: 15rpx;
				}
				image {
					width: 12rpx;
					height: 22rpx;
					vertical-align: middle;
					margin-top: 5rpx;
				}
			}
		}
		.notAvailable {
			width: 100%;
			height: 150rpx;
			text-align: center;
			line-height: 200rpx;
			font-size: 24rpx;
			color: #666;
			margin-top: 200rpx;
		}
	// }
}
</style>
